<template>
  <div class="page">
    <breadcrumb>备选库</breadcrumb>
    <!-- 选择大学 -->
    <major-sideslip ref="refMajorSideslip" @closeSideslipEvent="getData"></major-sideslip>

    <div class="content scroll-wrap" v-if="list.length > 0">
      <div v-for="(item,index) in list" :key="index" v-if="item.choose">
        <ul class="line flex-row">
          <li class="flex">
            <block type="major" :data="{name:item.majorName,schoolingTime:item.schoolingTime,grade:item.grade}"></block>
          </li>
          <li class="p0-20 flex-row--c">
            <div class="block-btn--blue" @click="get(item)">选择大学</div>
            <div class="block-btn--del" @click="del(item);item.choose=false">删除</div>
          </li>
          <li class="w-40 p15-0 pl20 flex-row--c">
            <div class="block-table--one flex">
              <h6><span class="c-blue">{{item.collegeCnt || 0}} </span>个备选大学</h6>
              <ul v-if="item.collegeCnt > 0">
                <li v-for="(school,i) in item.firstCollegeListBeans" :key="i" v-if="!school.choose">
                  <div @click="deleteSchool(item,school);school.choose=true;item.collegeCnt=item.collegeCnt-1">
                    <span :class="'c-'+school.chongShouBao.id">
                      {{school.chongShouBao.name}}{{school.chongShouBao.id!==4?school.probability+'%':school.probability}}
                    </span>
                    <p class="ell">{{school.collegeName}}</p>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <paginate v-if="totalElements>15" :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
    </div>
    <no-content v-else :text="text" style="width:100%"></no-content>
  </div>
</template>

<script>
import { api } from '@/utils'
import _ from 'lodash'

import majorSideslip from './major-sideslip'
const COMPONENTS = {
  majorSideslip
}
export default {
  layout: 'zhiyuan-select',
  components: COMPONENTS,
  data () {
    return {
      list: [],
      params: {
        page: 0,
        size: 15
      },
      totalElements: 0,
      page: 1,
      loading: false,
      text: '正在加载...'
    }
  },
  created () {
    this.list = []
    this.getData()
  },
  methods: {
    deleteSchool (item, school) {
      let _params = {
        majorId: item.majorId,
        collegeId: school.collegeId,
        enrollStudentPlansId: school.enrollStudentPlansId
      }
      this.$axios.post(api.setFirstMajorCollege, _params).then(data => {
        this.$message.success('成功删除大学')
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
        this.getData()
      })
    },
    bindSelect (value) {
      this.page = 1
      this.getData()
    },
    get (data) {
      this.$refs.refMajorSideslip.init(data)
    },
    del ({id}) {
      // delFirstMajor
      this.$axios.post(api.delFirstMajor, {id: id}).then(data => {
        this.$message.success('成功删除专业')
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
        this.getData()
      })
    },
    getData () {
      this.$axios.get(api.queryFirstChooseMajor, {params: this.params}).then(data => {
        if (!_.isEmpty(data)) {
          if (data.content.length > 0) {
            data.content.forEach(item => {
              if (!item.chongShouBao) {
                item.chongShouBao = {
                  id: 4,
                  name: '数据缺失'
                }
              }
            })
            this.list = data.content
            this.totalElements = data.totalElements
            // 加载状态结束
            this.loading = false
          } else {
            this.text = '暂无数据'
            this.list = []
          }
        } else {
          this.text = '暂无数据'
          this.list = []
          this.totalElements = 0
        }
      }).catch(err => {
        console.log(err)
        this.text = '网络走丢了，请稍后重试！'
      })
    },

    pagechange (currentPage) {
      this.page = currentPage
      this.params.page = currentPage - 1
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">

.top-select{
  padding:25px 0 20px;
  border-bottom:1px solid $line;
}
/deep/ .el-tabs__nav-scroll{
  padding:0 10px !important;
}

.block-btn--blue{
  margin-right:20px;
}

.page {
  width:100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .content {
    padding: 0;
    flex: 1;
    // overflow: hidden;
    // overflow-y: auto;
  }
}
</style>
